<template>
	<el-dialog :visible.sync="addVisible" @close="$emit('update:addVisible',false)" width="70%" :show-close='false' class="addEquipDialog"
	 :closeOnClickModal='false'>
		<span slot="title" class="dialog-title">

		  	选择仪器
			<el-button  size="mini" @click="close" class="popupClose">关闭</el-button>
		</span>
		<div class="heighHalf">
			<div class="seachTip">
				<div class="inlineblock verticalmiddle infoitem">
					仪器名称
					<div class="inlineblock verticalmiddle informationItem">
						<el-input v-model="searchMainequip" size="mini" placeholder="仪器名称" @keyup.enter.native="getEquipList"></el-input>
					</div>
				</div>
				<div class="inlineblock verticalmiddle infoitem">
					仪器类型
					<div class="inlineblock verticalmiddle informationItem">
						<el-cascader :options="mainEquipmentType" v-model="outMainEquipment" :props = "defalutEquip"  size="mini" style="width:100%;" @change="getEquipList" clearable filterable>
                        </el-cascader>
					</div>
				</div>

				<div class="inlineblock basicRightDistanceA searchIcon">
					<el-button size="mini"  @click="getEquipList">搜索</el-button>
				</div>
			</div>

			<el-table :data="equipmentList" style="width: 100%;height:calc(100% - 50px);" size="mini" class="tableCon" ref="multipleTable"  @selection-change="handleSelectionChange">
				<el-table-column fixed type="selection" width="38px">
				</el-table-column>
				<el-table-column label="序号" width="70px">
					<template slot-scope="scope">
						{{scope.$index+1}}
					</template>
				</el-table-column>
				<el-table-column property="name" label="名称" min-width="150px" show-overflow-tooltip>
				</el-table-column>

				<el-table-column property="equipmentTypeName" label="类型" min-width="100px" show-overflow-tooltip>
				</el-table-column>
        <el-table-column property="officesName" :label="stationName" min-width="100px" show-overflow-tooltip>
          <template slot-scope="scope">
            {{scope.row.offices == 'ALL'?"全部":(scope.row.officesName?scope.row.officesName:"---")}}
            
          </template>
        </el-table-column>
				<el-table-column property="isDefault" label="是否默认" min-width="80px">
					<template slot-scope="scope">
						<!--<el-radio v-model="scope.row.isDefault"></el-radio>-->
						<el-checkbox v-model="scope.row.isDefault"></el-checkbox>
						<!--<el-select v-model="scope.row.isDefault" size="mini">
							<el-option v-for="item in isDefaultOptions" :key="item.value" :label="item.label" :value="item.value">
							</el-option>
						</el-select>-->
					</template>
				</el-table-column>
			</el-table>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button type="primary" size="mini" @click="subEquip" :disabled = "!isRepeat">确 定</el-button>
			<el-button  size="mini" @click="close">取 消</el-button>
		</span>

	</el-dialog>

</template>

<script>
	import { mapState } from 'vuex'

	export default {
		data() {
			return {
				equipmentList: [], //仪器列表
				equipmentList1: [], //辅助仪器列表
				selectOldRow: null, //选中的主仪器
				oldRow: null, //选中的辅仪器
				equipmentId: null, //主仪器id
				searchMainequip: "", //搜索主仪器
				searchequip: "", //搜索辅助仪器
				mainEquipmentType:[],
				outMainEquipment:[],
				equipmentListSelect:[],// 被勾选的仪器
				defalutEquip:{
					value:'id',
					label:'name',
					children:'children',
				},
				isDefaultOptions:[{
					label:'是',
					value:true
				},{
					label:'否',
					value:false
				},],
				isRepeat:true,
        stationName:"厂站",

			}
		},
		props: ['addVisible', 'detectAbiltyId', 'isMain', 'mainEquiptype'],
		components: {

		},

		computed: {
			...mapState(['mainEquipType']),
		},
		mounted() {

		},
		watch: {
			addVisible(val, oldVal) {
				if (val) {
           this.stationName = this.util.getStationName()
					this.getEquipList();
					this.getMainEquip();
				}
			}
		},
		methods: {
			getMainEquip() {
				this.$http({
					method: 'post',
					apiUrl: '/technology/readMainEquipTypeList.htm',
				}).then(res => {
					if (res.code === 0) {
						for(var i in res.data){
							delete res.data[i].disabled;
						}
						this.mainEquipmentType = res.data;
					}
				})
			},
			// 获取主辅仪器列表
			getEquipList() {
					var data = {
						mainEquiptype: this.outMainEquipment[this.outMainEquipment.length - 1],
						equipmentName: this.searchMainequip
					}

				this.$http({
					method: 'post',
					apiUrl: '/technology/readEquipmentList.htm',
					params: data,
					isJson: true,
				}).then(res => {
					if (res.code === 0) {
						for(var i in res.data){
							this.$set(res.data[i],'isDefault',false)
							this.$set(res.data[i],'equipment',res.data[i].id)
							delete res.data[i].id;
						}
						this.equipmentList = res.data;


					}
				})
			},

			handleSelectionChange(val){
				this.equipmentListSelect = val
			},
			// 保存选中的主辅仪器
			subEquip() {
				var url = '/technology/updateEquipment.htm';
				if (this.equipmentListSelect.length == 0) {
					this.$message({
						type: 'info',
						message: '请至少选中一个仪器！'
					});
					return
				}
				var count = 0;
				for(var i in this.equipmentListSelect){
					if(this.equipmentListSelect[i].isDefault){
						count ++ ;
					}
					this.equipmentListSelect[i].fRef = this.detectAbiltyId;
					if(this.isMain == 'main'){
						this.equipmentListSelect[i].isMain = true;
					}else{
						this.equipmentListSelect[i].isMain = false;
					}
				}
				if(count >= 2){
					this.$notify({
						type: 'warning',
						message: '只能设置一个默认仪器！',
						title:"警告"
					});
					return;
				}
				var data = {
					fRef: this.detectAbiltyId,  //当前编辑的能力参数id
					equipment: this.equipmentId,  //选中的主仪器id
					assistEquipment: this.assistEquipmentId,  //辅助仪器id
				}
				this.isRepeat = false;
				this.$http({
					method: 'post',
					apiUrl: url,
					params: this.equipmentListSelect,
					isJson: true,
				}).then(res => {
					this.isRepeat = true;
					if (res.code === 0) {
						this.$notify({
							type: 'success',
							message: '提交成功',
							title:"成功"
						});
						this.close();
						this.$emit('getablityequipment')
					}
					console.log(this.$parent.mainEquipmentBeanList)

				})
			},
			// 清除选中
			toggleSelection(rows) {
				if (rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
						// this.$refs.multipleTable1.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
					// this.$refs.multipleTable1.clearSelection();
				}
			},

			//关闭
			close(formName) {
				this.searchMainequip = "";//搜索主仪器
				this.searchequip = "";  //搜索辅助仪器
				this.$emit('update:addVisible', false);
				this.toggleSelection()
			},
		}
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.addEquipDialog .el-dialog {
		margin-top: 10vh !important;
		height: 80%;
	}

	.addEquipDialog .el-dialog .el-dialog__body {
		height: calc(100% - 85px);
		padding: 10px;
	}

	/*.addEquipDialog .heighHalf .el-table__header thead th:nth-of-type(1) .cell {
		display: none;
	}*/

	.addEquipDialog .heighHalf {
		height:100%
	}

	.addEquipDialog .heighHalf .height40 {
		height: 40px;
		line-height: 40px;
	}
</style>
